<template>
  <div ref="main" style="width: 100%; height: 430px" />
</template>

<script>
export default {
  mounted() {
    var myChart = this.$echarts.init(this.$refs.main)
    myChart.setOption({
      title: {
        text: '剩余课时数：36',

        textStyle: {
          fontSize: 25,
          color: 'rgba(130, 200, 180, 1)'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
      },
      legend: {
        data: []
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },

      graphic: {
        type: 'text',
        left: 'center',
        top: '40%',
        style: {
          text: '使用课程数',
          textAlign: 'center',
          fill: '#333',
          fontSize: 20,
          fontWeight: 700
        }
      },
      series: [
        {
          normal: {
            show: true
          },
          barWidth: '60%',
          height: '100%',
          type: 'pie',
          radius: [90, 200],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },

          data: [
            { value: 40, name: '四级课程' },
            { value: 38, name: '雅思提升' },
            { value: 32, name: '托福课程' },
            { value: 30, name: '英语口语' },
            { value: 28, name: '大学英语' }
          ]
        }
      ]

    })
  }
}
</script>

<style lang="scss" scoped>
</style>
